<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <style>
      /* 定义原选择器样式 */
      div {
        position: relative;
        left: 0px;
        top: 10px;
        width: 100px;
        height: 100px;
        background-image: url("./image/logo.gif");
        /* 将动画与样式绑定 */

        /*实测 名字需要配合其他属性(持续时间)进行绑定才有效果*/
        /* animation: myAnimation 10s; */
        animation-name: Jeff;
        /* 动画持续时间 */
        animation-duration: 2s;
        /* 速度曲线 */
        /* animation-timing-function: ease-in-out; */
        /* 延迟执行时机 */
        animation-delay: 0.3s;
        /*循环次数*/
        animation-iteration-count: infinite;
        /*交替循环*/
        animation-direction: alternate; /*交替*/
        /*暂停*/
        animation-play-state: running;
        animation-timing-function: ease;
      }


      @keyframes Jeff {
        0% {
          top: 10px;
        }
        25% {
          top: 300px;
        }
        75% {
          top: 500px;
        }
        100% {
          left: 500px;
          top: 500px;
        }
      }
      div:hover {
        background-image: none;
        background-color: gray;
        animation-play-state: paused;
        font-size: 30px;
      }
    </style>
    <style type="text/css">
      p {
        width: 100px;
        height: 100px;
        opacity: 0;
      }
      p:hover {
        font-size: 30px;
        color: red;
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div><p>Jeff</p></div>
  </body>
</html>
